<!DOCTYPE html>

<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
  <meta charset="utf-8">
  <title>Edu Science</title>

  <meta http-equiv="X-UA-7Compatible" content="IE=edge">
  <meta name="description" content="Construction Html5 Template">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">

  <!-- theme meta -->
  <meta name="theme-name" content="educenter" />

  <!-- ** Plugins Needed for the Project ** -->
  <!-- Bootstrap -->
  <link rel="stylesheet" href="/static/plugins/bootstrap/bootstrap.min.css">
  <!--
    Slick是一个响应式的、触摸友好的jQuery滑块插件，常用于创建轮播图、图片展示等
  -->
  <link rel="stylesheet" href="/static/plugins/slick/slick.css">
  <!--
    引入了Themify Icons的样式表。Themify Icons是一个包含大量矢量图标的图标库，可用于网页设计和开发
   -->
  <link rel="stylesheet" href="/static/plugins/themify-icons/themify-icons.css">
  <!--
    引入了Animation CSS的样式表。这个库提供了一系列的CSS动画类，可以很容易地添加到HTML元素中，实现各种动画效果
   -->
  <link rel="stylesheet" href="/static/plugins/animate/animate.css">
  <!--
    引入了AOS（Animate on Scroll）的样式表。AOS是一个JavaScript库，它可以在元素滚动到视口时触发动画效果
   -->
  <link rel="stylesheet" href="/static/plugins/aos/aos.css">
  <!--
    引入了Venobox Popup的的样式表。Venobox是一个用于创建模态框（modal boxes）或弹出窗口（popups）的JavaScript插件，常用于图片展示、视频播放或表单提交等场景
   -->
  <link rel="stylesheet" href="/static/plugins/venobox/venobox.css">

  <!-- Main Stylesheet -->
  <link href="/static/css/style.css" rel="stylesheet">

  <!--Favicon-->
  <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon">

</head>

<body>
<!-- header -->
<header class="fixed-top header">
  <!-- top header -->
  <div class="top-header py-2 bg-white">
    <div class="container">
      <div class="row no-gutters">
        <div class="col-lg-4 text-center text-lg-left">

          <ul class="list-inline d-inline">
            <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="/static/#"><i class="ti-github"></i></a></li>
            <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="/static/#"><i class="ti-layout-placeholder"></i></a></li>
            <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="/static/#"><i class="ti-linux"></i></a></li>
          </ul>
        </div>
        <div class="col-lg-8 text-center text-lg-right">
          <ul class="list-inline">
            <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="/static/notice.html">通知</a></li>
            <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="/static/#loginModal" data-toggle="modal" data-target="#loginModal">登录</a></li>
            <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="/static/#signupModal" data-toggle="modal" data-target="#signupModal">注册</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- navbar -->
  <div class="navigation w-100">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-dark p-0">
        <a class="navbar-brand" href="/static/index.html"><img src="/static/images/logo.png" alt="logo"></a>
        <button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation"
                aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navigation">
          <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item @@index">
              <a class="nav-link" href="/static/index.html">主页</a>
            </li>
            <li class="nav-item @@courses">
              <a class="nav-link" href="/static/courses.html">课程</a>
            </li>
            <li class="nav-item @@events">
              <a class="nav-link" href="/static/events.html">活动</a>
            </li>
            <li class="nav-item @@blog">
              <a class="nav-link" href="/static/blog.html">资料</a>
            </li>
            <li class="nav-item @@teacher">
              <a class="nav-link" href="/static/teacher.html">老师</a>
            </li>
            <li class="nav-item @@about">
              <a class="nav-link" href="/static/about.html">关于</a>
            </li>
            <li class="nav-item @@contact">
              <a class="nav-link" href="/static/contact.html">联系</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</header>
<!-- /header -->
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content rounded-0 border-0 p-4">
            <div class="modal-header border-0">
                <h3>Register</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="login">
                    <form action="#" class="row">
                        <div class="col-12">
                            <input type="text" class="form-control mb-3" id="signupPhone" name="signupPhone" placeholder="Phone">
                        </div>
                        <div class="col-12">
                            <input type="text" class="form-control mb-3" id="signupName" name="signupName" placeholder="Name">
                        </div>
                        <div class="col-12">
                            <input type="email" class="form-control mb-3" id="signupEmail" name="signupEmail" placeholder="Email">
                        </div>
                        <div class="col-12">
                            <input type="password" class="form-control mb-3" id="signupPassword" name="signupPassword" placeholder="Password">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">SIGN UP</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content rounded-0 border-0 p-4">
            <div class="modal-header border-0">
                <h3>Login</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="#" class="row">
                    <div class="col-12">
                        <input type="text" class="form-control mb-3" id="loginPhone" name="loginPhone" placeholder="Phone">
                    </div>
                    <div class="col-12">
                        <input type="text" class="form-control mb-3" id="loginName" name="loginName" placeholder="Name">
                    </div>
                    <div class="col-12">
                        <input type="password" class="form-control mb-3" id="loginPassword" name="loginPassword" placeholder="Password">
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">LOGIN</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- page title -->
<section class="page-title-section overlay" data-background="/static/images/backgrounds/page-title.jpg">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <ul class="list-inline custom-breadcrumb mb-2">
          <li class="list-inline-item"><a class="h2 text-primary font-secondary" href="/static/teacher.html">老师</a></li>
          <li th:text="${teacher.getName()}" class="list-inline-item text-white h3 font-secondary nasted">老师详情</li>
        </ul>
        <p class="text-lighten mb-0">老师如春风化雨，润物无声；
          授业解惑不辞劳，桃李满园香。<br>
          言传身教树楷模，学子心中永不忘；
          感谢师恩深似海，此生铭记永流芳。</p>
      </div>
    </div>
  </div>
</section>
<!-- /page title -->

<!-- teacher details -->
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-5 mb-5">
        <img class="img-fluid w-100" th:src="${teacher.getPhoto()}" alt="teacher">
      </div>
      <div class="col-md-6 mb-5">
        <h2 class="text-color" th:text="${teacher.getName()}">name</h2>
        <br>
        <h4 class="text-color">性别：<span th:text="${teacher.getSex()}"></span></h4>
        <br>
        <h4 class="text-color">年龄：<span th:text="${teacher.getAge()}"></span></h4>
        <br>
        <h4 class="text-color">个人简介:</h4>
        <p class="mb-5 ellipsis " th:text="${teacher.getIntroductory()}">Lorem ipsum dolor.</p>

        <div class="col-md-6">
          <h4 class="mb-4">兴趣/爱好</h4>
          <ul class="list-unstyled">
            <li class="mb-3">科学探索</li>
            <li class="mb-3">运动健身</li>
            <li class="mb-3">阅读和写作</li>
            <li class="mb-3">旅行探险</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-12">
        <h4 class="mb-4">COURSES</h4>
      </div>
      <!-- course item -->
      <div class="col-lg-4 col-sm-6 mb-5">
        <div class="card p-0 border-primary rounded-0 hover-shadow">
          <img class="card-img-top rounded-0" src="/static/images/courses/course-4.jpg" alt="course thumb">
          <div class="card-body">
            <ul class="list-inline mb-2">
              <li class="list-inline-item"><i class="ti-calendar mr-1 text-color"></i>02-14-2018</li>
              <li class="list-inline-item"><a class="text-color" href="/static/course-single.html">Humanities</a></li>
            </ul>
            <a href="/static/course-single.html">
              <h4 class="card-title">Complete Freelancing</h4>
            </a>
            <p class="card-text mb-4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna.</p>
            <a href="/static/course-single.html" class="btn btn-primary btn-sm">Apply now</a>
          </div>
        </div>
      </div>
      <!-- course item -->
      <div class="col-lg-4 col-sm-6 mb-5">
        <div class="card p-0 border-primary rounded-0 hover-shadow">
          <img class="card-img-top rounded-0" src="/static/images/courses/course-5.jpg" alt="course thumb">
          <div class="card-body">
            <ul class="list-inline mb-2">
              <li class="list-inline-item"><i class="ti-calendar mr-1 text-color"></i>02-14-2018</li>
              <li class="list-inline-item"><a class="text-color" href="/static/course-single.html">Humanities</a></li>
            </ul>
            <a href="/static/course-single.html">
              <h4 class="card-title">Branding Design</h4>
            </a>
            <p class="card-text mb-4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna.</p>
            <a href="/static/course-single.html" class="btn btn-primary btn-sm">Apply now</a>
          </div>
        </div>
      </div>
      <!-- course item -->
      <div class="col-lg-4 col-sm-6 mb-5">
        <div class="card p-0 border-primary rounded-0 hover-shadow">
          <img class="card-img-top rounded-0" src="/static/images/courses/course-6.jpg" alt="course thumb">
          <div class="card-body">
            <ul class="list-inline mb-2">
              <li class="list-inline-item"><i class="ti-calendar mr-1 text-color"></i>02-14-2018</li>
              <li class="list-inline-item"><a class="text-color" href="/static/course-single.html">Humanities</a></li>
            </ul>
            <a href="/static/course-single.html">
              <h4 class="card-title">Art Design</h4>
            </a>
            <p class="card-text mb-4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna.</p>
            <a href="/static/course-single.html" class="btn btn-primary btn-sm">Apply now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /teacher details -->

<!-- footer -->
<footer>
  <!-- newsletter -->
  <div class="newsletter">
    <div class="container">
      <div class="row">
        <div class="col-md-9 ml-auto bg-primary py-5 newsletter-block">
          <h3 class="text-white">Subscribe Now</h3>
          <form action="#">
            <div class="input-wrapper">
              <input type="email" class="form-control border-0" id="newsletter" name="newsletter" placeholder="Enter Your Email...">
              <button type="submit" value="send" class="btn btn-primary">Join</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- footer content -->
  <div class="footer bg-footer section border-bottom">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-sm-8 mb-5 mb-lg-0">
          <!-- logo -->
          <a class="logo-footer" href="/static/index.html"><img class="img-fluid mb-4" src="/static/images/logo.png" alt="logo"></a>
          <ul class="list-unstyled">
            <li class="mb-2">23621 15 Mile Rd #C104, Clinton MI, 48035, New York, USA</li>
            <li class="mb-2">+1 (2) 345 6789</li>
            <li class="mb-2">+1 (2) 345 6789</li>
            <li class="mb-2">contact@yourdomain.com</li>
          </ul>
        </div>
        <!-- company -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">COMPANY</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/about.html">About Us</a></li>
            <li class="mb-3"><a class="text-color" href="/static/teacher.html">Our Teacher</a></li>
            <li class="mb-3"><a class="text-color" href="/static/contact.html">Contact</a></li>
            <li class="mb-3"><a class="text-color" href="/static/blog.html">Blog</a></li>
          </ul>
        </div>
        <!-- links -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">LINKS</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/courses.html">Courses</a></li>
            <li class="mb-3"><a class="text-color" href="/static/events.html">Events</a></li>
            <li class="mb-3"><a class="text-color" href="/static/notice.html">Notice</a></li>
            <li class="mb-3"><a class="text-color" href="/static/scholarship.html">Scholarship</a></li>
          </ul>
        </div>
        <!-- support -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">SUPPORT</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/#">Forums</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#">Documentation</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#!">Language</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#!">Release Status</a></li>
          </ul>
        </div>
        <!-- support -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">RECOMMEND</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/#">WordPress</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#">LearnPress</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#">WooCommerce</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#">bbPress</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- copyright -->
  <div class="copyright py-4 bg-footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-7 text-sm-left text-center">
          <p class="mb-0">Copyright &copy;
            <script>
              var CurrentYear = new Date().getFullYear()
              document.write(CurrentYear)
            </script> 
            , <a class="text-muted" target="_blank" href="/static/http://www.mobanwang.com/" title="网页模板">网页模板</a>
          </p>
        </div>
        <div class="col-sm-5 text-sm-right text-center">
          <ul class="list-inline">
            <li class="list-inline-item"><a class="d-inline-block p-2" href="/static/#"><i class="ti-facebook text-primary"></i></a></li>
            <li class="list-inline-item"><a class="d-inline-block p-2" href="/static/#"><i class="ti-twitter-alt text-primary"></i></a></li>
            <li class="list-inline-item"><a class="d-inline-block p-2" href="/static/#"><i class="ti-github text-primary"></i></a></li>
            <li class="list-inline-item"><a class="d-inline-block p-2" href="/static/#"><i class="ti-instagram text-primary"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>
<!-- /footer -->

<!-- jQuery -->
<script src="/static/plugins/jQuery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="/static/plugins/bootstrap/bootstrap.min.js"></script>
<!-- slick slider -->
<script src="/static/plugins/slick/slick.min.js"></script>
<!-- aos -->
<script src="/static/plugins/aos/aos.js"></script>
<!-- venobox popup -->
<script src="/static/plugins/venobox/venobox.min.js"></script>
<!-- filter -->
<script src="/static/plugins/filterizr/jquery.filterizr.min.js"></script>
<!-- Main Script -->
<script src="/static/js/script.js"></script>

</body>
</html>